﻿@model DevExtreme.NETCore.Demos.ViewModels.SchedulerResourcesViewModel
@{
    var resourcesList = new[] { "Owner", "Room", "Priority" };
}

@(Html.DevExtreme().Scheduler()
    .ID("scheduler")
    .DataSource(Model.Appointments)
    .Views(new[] { SchedulerViewType.WorkWeek })
    .CurrentView(SchedulerViewType.WorkWeek)
    .CurrentDate(new DateTime(2017, 5, 22))
    .StartDayHour(9)
    .EndDayHour(19)
    .Resources(res => {
        res.Add()
            .FieldExpr("RoomId")
            .ValueExpr("Id")
            .ColorExpr("Color")
            .Label("Room")
            .DisplayExpr("Text")
            .AllowMultiple(true)
            .DataSource(Model.Rooms);

        res.Add()
            .FieldExpr("PriorityId")
            .ValueExpr("Id")
            .ColorExpr("Color")
            .Label("Priority")
            .DisplayExpr("Text")
            .AllowMultiple(true)
            .DataSource(Model.Priorities);

        res.Add()
            .FieldExpr("OwnerId")
            .ValueExpr("Id")
            .ColorExpr("Color")
            .Label("Owner")
            .DisplayExpr("Text")
            .AllowMultiple(true)
            .DataSource(Model.Owners);
    })
    .Height(600)
    .TextExpr("Text")
    .StartDateExpr("StartDate")
    .EndDateExpr("EndDate")
    .AllDayExpr("AllDay")
    .RecurrenceRuleExpr("RecurrenceRule")
    .RecurrenceExceptionExpr("RecurrenceException")
)

<div class="options">
    <div class="caption">Use colors of:</div>
    <div class="option">
        @(Html.DevExtreme().RadioGroup()
            .Items(resourcesList)
            .Value(resourcesList[0])
            .Layout(Orientation.Horizontal)
            .OnValueChanged("resources_valueChanged")
        )
    </div>
</div>

<script>
    function resources_valueChanged(e) {
        var scheduler = $("#scheduler").dxScheduler("instance"),
            resources = scheduler.option("resources");

        for(var i = 0; i < resources.length; i++) {
            resources[i].useColorAsDefault = resources[i].label == e.value;
        }

        scheduler.repaint();
    }
</script>
